<template>
  <view class="flex text-[28rpx] items-center">
    <view
      v-for="(item, index) in props.className"
      :key="item"
      :style="{ background: getBackgroundColor(item) }"
      class="px-[12rpx] py[6rpx] bg-amber mr-[10px] text-[24rpx] rounded-[60rpx] text-white"
      @click.stop="linkTo(index)"
    >
      {{ item }}
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getBackgroundColor } from '@/utils/color'
const props = defineProps<{
  className: string[]
  classId: string[]
}>()
const linkTo = (index: number) => {
  const arr = props.classId
  if (arr.length === 3 && !index) {
    return
  }
  if (arr.length === 3) {
    arr.shift()
    index = index - 1
  }
  uni.navigateTo({
    url: `/pages/square/index?title=${props.className[0]}&pid=${arr[0]}&id=${arr[index]}`,
  })
}
</script>
<style lang="scss" scoped></style>
